<template>
  <baidu-map
    :center="v_center"
    :zoom="zoom"
    :scroll-wheel-zoom="true"
    @ready="handler">
    <!-- 地图左上角搜索 -->
    <!-- <bm-control :offset="{width: 10, height: 10}">
      <bm-auto-complete v-model="v_keyword" :sugStyle="{zIndex: 1}" :location="location">
        <am-input placeholder="门店详细地址"></am-input>
      </bm-auto-complete>
    </bm-control> -->
    <!-- 地图视图 -->
    <bm-view class="map"></bm-view>
    <!-- 缩放 -->
    <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> -->
    <!-- 定位 -->
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>

    <!-- 检索结果框 -->
    <bm-local-search
      :keyword="keyword"
      :auto-viewport="true"
      :location="location"
      :pageCapacity="pageCapacity"
      @infohtmlset="infohtmlset" />
  </baidu-map>
</template>

<script>
/**
 * @link
 * https://dafrok.github.io/vue-baidu-map/#/
 */
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'hAOUDr8zMAquzEUWVfS3sGIHX6CRIWOR'
});

/**
 * @description - 地图handler的时候，props的数据若为空为渲染错误
 * 定义默认位置
 */
const CENTER = '广东省中山市';

export default {
  name: 'bd-map',
  data () {
    return {
      init_center:　'广东省中山市',// 初始化位置
      // v_keyword: '',// 检索关键词
      v_center: '',// 省
      zoom: 0
    }
  },
  methods: {
    handler ({BMap, map}) {// 初始化地图
      this.v_center = this.center || CENTER;
      // this.v_location = this.location;
      // this.v_keyword = this.keyword;
      this.zoom = 15;
    },
    infohtmlset(poi) {// 标注气泡创建后，即点击标注气泡
      this.$emit('update:poi', poi);
    }
  },
  props: {
    center: {// 省
      type: String,
      default: '广东省中山市',
      required: false
    },
    location: {// 地区
      type: String,
      default: '中山市',
      required: false
    },
    keyword: {// 地区关键词
      type: String,
      default: '',
      required: false
    },
    pageCapacity: {// 检索结构数量
      type: Number,
      default: 3,
      required: false
    }
  },
  watch: {
    center(val) {// 省
      this.v_keyword = '';
      this.v_center = val;
    },
    location(val) {// 省+市
      this.v_keyword = '';
      this.v_center = this.center + val;
    },
    keyword(val) {// 省+市：关键词
      // this.v_keyword = val;
    }
  },
  components: {
    // BaiduMap
  },
  mounted() {
  }
}
</script>

<style scoped>
.map { width: 100%; height: 280px; }
</style>